*{
    margin:0;
    padding:0;
}
body{
    background:black;
}
.main{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.ring{
    width:300px;
    height:300px;
    border-radius: 50%;
    background:linear-gradient(#2ecc71,transparent 50%);
    animation:roll 1s linear infinite;
}
@keyframes roll{
    100%{
        transform: rotateZ(360deg);
        filter:hue-rotate(360deg);
    }
}
.ring:after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border-radius: 50%;
    background:linear-gradient(#2ecc71,transparent 50%);
    z-index:-1;
    filter:blur(30px);
}
.ring::before{
    content:"";
    position:absolute;
    width:275px;
    height:275px;
    left:50%;
    top:50%;
    background:black;
    border-radius: 50%;
    transform: translate(-50%,-50%);
}